<!--
 * @Autor: dingxiaolin
 * @Date: 2020-11-28 14:49:18
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2020-12-24 22:01:04
-->
<template>
    <view id="login">
        <view class="logo">
            <image class="logo-img" src="../../static/logo.png" />
        </view>
         <form @submit="formSubmit" @reset="formReset">
            <view class="imgContainer">
                <view class="uploaderC" @click="upload(1)">
                    <img :src="form.photoUrl" alt="" class="uploader" v-if="form.photoUrl" name="photoUrl" @tap.stop="preview(form.photoUrl)">
                    <img :src="defaultAvatar" alt="" class="uploader" v-else>
                    <van-icon name="plus" class="plusIcon" @tap.stop="form.type=2"  v-if="form.type==1"/>
                </view>
                <view class="uploaderC" v-if="form.type==2" @click="upload(2)">
                    <img :src="form.photoUrlTwo" alt="" class="uploader" v-if="form.photoUrlTwo" name="photoUrlTwo" @tap.stop="preview(form.photoUrlTwo)">
                    <img :src="defaultAvatar" alt="" class="uploader" v-else>
                    <van-icon name="cross" class="minusIcon" @tap.stop="removeAvatarTwo" />
                </view>
            </view>
            <view class="name">
                <input class="input" placeholder=" 逝者姓名" v-model="form.name" name="name" type="text"/>
            </view>
            <view class="name" v-if="form.type==2">
                <input class="input" placeholder=" 逝者姓名" v-model="form.nameTwo" name="nameTwo" type="text" />
            </view>
            <view class="btnGroup">  
                    <button class="success"  formType="reset" >重置</button>
                    <button class="success"  formType="submit" >前往xx</button>
            </view>
        </form>
        <p class="count">共 <span >{{count}}</span> 次</p>
		<van-toast id="van-toast" />
		<van-dialog id="van-dialog" />
    </view>
</template>

<script>
import api from '@/http/api'
import Toast from "@/wxcomponents/vant/toast/toast";
import Dialog from "@/wxcomponents/vant/dialog/dialog";
import {validation} from "@/utils/formValidation.js";
export default {
    components: {

    },
    data () {
        return {
            rules: [
                {
                    name: "name",
                    rule: ["required", "hasSpace","maxLength:4"],
                    msg: ["请输入姓名", "不能有空格","请输入4个字以内的姓名"]
                },
                {
                    name: "nameTwo",
                    rule: ["required", "rangeLength:[2,4]", "equalto:name"],
                    msg: ["请输入姓名", "请输入2-4位姓名",'两个名字不相同']
                },
                {
                    name: "photoUrl",
                    rule: ["required"],
                    msg: ["请上传头像1"]
                },
                {
                    name: "photoUrlTwo",
                    rule: ["required"],
                    msg: ["请上传头像2"]
                }
            ],
            list:[],
            id:"",
            count:0,
            form:{
                name: "",
                photoUrl: "",
                nameTwo: "",
                photoUrlTwo: "",
                type:1
            },
            defaultAvatar:"cloud://node-d5ba16.6e6f-node-d5ba16-1251807501/images/imgUpload.png"
        }
    },
    onLoad(options){
    },
    onShow(){
    },
	
    onUnload(){
    },

    methods: {
        removeAvatarTwo(){
            var obj={
                nameTwo: "",
                photoUrlTwo: "",
                type:1
            }
            this.form=Object.assign({},this.form,obj);
        },
        upload(i){
            console.log('ttt');
            var that=this;
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
                success: function(res) {
                    wx.cloud.uploadFile({
                        cloudPath: 'avatar/'+Date.now() + parseInt(Math.random() * 1000) + '.jpg',
                        filePath: res.tempFilePaths[0],
                        success(res) {
                            console.log('222',res.fileID) //内网图片路径
                            wx.cloud.getTempFileURL({
                                fileList: [res.fileID],
                                success(res) {
                                console.log('666',res.fileList[0].tempFileURL)  //外网图片路径
                                    i==1 && (that.form.photoUrl=res.fileList[0].tempFileURL);
                                    i==2 && (that.form.photoUrlTwo=res.fileList[0].tempFileURL);
                                },
                                fail(){
                                    Toast("头像上传失败");
                                }
                            })
                        },
                         fail:function(){
                            Toast("头像上传失败");
                        }
                    })
                }
            })
        },
        // 表单提交
        formSubmit(e) {
            console.log('ee',e.detail.value)
            let validator = validation(e.detail.value, this.rules);
            if (validator) { 
                wx.showToast({
                    title: "提交成功!",
                    icon: "none"
                });
            }
        },
        //重置
        formReset(){
            console.log('重置')
        },
        preview(url){
            wx.previewImage({
              urls: [url] //需要预览的图片链接列表,
            });
        },
       jumptoSaomu(){
           if(this.form.name){
                if(this.form.name.length>4){
                    Toast("请输入4个字以内的姓名");
                    return;
                }
            }else{
                    Toast("请输入姓名");
                    return;
            }
            if(this.form.type==2){
                if(this.form.nameTwo&&this.form.nameTwo.length>4){
                    Toast("请输入4个字以内的姓名");
                    return;
                }
                if(!this.form.nameTwo){
                    Toast("请输入姓名");
                    return;
                }
            }
           api.autoAddVisitsCount(this.id)
        //    wx.navigateTo({ url: 'url' });
       }
    }
}
</script>
<style >
page{
   background:#F4F4F4;
}
</style>
<style scoped lang="scss">
#login{
    width:100%;
    height:100%;
    .logo{
        margin-bottom:20rpx;
        display: flex;
        
        .logo-img{
            width:100%;
            height:230rpx;
        }
    }
    .imgContainer{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .uploaderC{
        position: relative;
        display: flex;
        justify-content: center;
        border:1rpx solid #E2A63D;
        padding:1rpx ;
        margin:20rpx;
        .uploader{
            width:200rpx;
            height:260rpx;
        }
        .minusIcon,.plusIcon{
            position: absolute;
            top:0;
            right:-40px;
        }
    }
    .name{
        height: 80rpx;
        margin:20rpx 40rpx;
        border:1rpx solid #ddd;
        border-radius:10rpx;
        .input{
            width:100%;
            height:100%;
            font-size:34rpx;
            padding-left:10rpx;
           
        }
    }
    .btnGroup{
        .success{
            margin:20rpx 40rpx;
            background:#46B62C;
            color:#fff;
            height:80rpx;
            line-height: 80rpx;
        }
    }
	.count{
     text-align: center;
     span{
         color:#46B62C;
     };
    }
    .bottomBg{
        position: fixed;
        bottom:0;
        height:260rpx;
        width:100%;
        image{
            width:100%;
            height:100%;
        }
    }
}

</style>
